<template>
	<view class="get">
		<view class="bar_top">
			<view class="search">
				<view class="search_input">
					<image src="/static/images/search.png" mode=""></image>
					<input type="text" v-model="title" placeholder="请输入关键词"/>
					<image src="/static/images/empty_btn.png" @click.stop="emptyValue" v-show="showEmptyBtn"></image>
				</view>
				<view class="search_btn" @tap="getData(2)">搜索</view>
			</view>
			<view class="bar_list">
					<view :class="type == 1 ? 'bar_item bar_active' : 'bar_item'"  @tap="changeType(1)">
						<text>配件</text>
					</view>
					<view :class="type == 2 ? 'bar_item bar_active' : 'bar_item'" @tap="changeType(2)">
						<text>附件</text>
					</view>
				</view>
		</view>
		
		<scroll-view scroll-y="true" class="sideBar" :style="'height:' + sideBarHeight + 'px;'">
			<block v-for="(item,index) in table">
				<view :key="index" :class="navId == index ? 'active' : ''" @tap="nav(index)">{{item}}</view>
			</block>
		</scroll-view>
		
		<view class="get_list">
			<block v-for="(item,index) in list" v-if="!boxHide && type==item.product_type" >
				<view class="get_item" :key="index">
					<image class="get_item_img" :src="item.thumb" mode="aspectFill"></image>
					<view class="get_item_content">
						<view>{{item.title}}</view>
						<view class="get_item_id">编号：{{item.number}}</view>
						<view class="get_item_id">型号：{{item.module?item.module:''}}</view>
						<view class="get_item_id">单位：{{item.unit?item.unit:''}}</view>
						<view class="get_item_id">数量：{{item.stock?item.stock:0}}</view>
						<view class="get_item_num" style="justify-content: space-between;">
							<view>单价：{{item.settlement}}</view>
							<view style="display: flex;align-items: center;">
								<image src="/static/images/subtract.png" @tap="editnum(0,index,item)"></image>
								<input type="text" v-model="item.num" @blur="mathTotal(index)"/>
								<image src="/static/images/push.png" @tap="editnum(1,index,item)"></image>
							</view>
						</view>
					</view>
				</view>
			</block> 

			<Loading ref="load"></Loading>
		</view>
		
		<view class="get_bottom">
			<view class="get_bottom_list">
				<view>合计：{{total}}件</view>
				<view class="totalPrice">总计:￥{{totalPrice}}</view>
				<view @tap="add()">填写库房信息</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				sideBarHeight:0,
				sideBarIndex:1,
				list:[],   // 显示集合
				protList:[], // 原集合
				loading:true,
				page:1,
				boxHide:true,
				table:[], // 类型集合
				navId:-1, // 产品类型下标
				title:"",
				total:0,   // 数量
				totalPrice:0, // 总额
				showEmptyBtn:false,
				limit:0,
				totalList:[],
				type:1, //1配件2附件
				isExcess:-1   // -1 未超额  
			}
		},
		onLoad(options) {
			let that = this;
			this.$api.getAccessoriesType({}).then(res =>{
				this.table = res
			})
			uni.getSystemInfo({
				success(res) {
					that.sideBarHeight = res.windowHeight - (res.windowWidth / 750 * 200)
				}
			})
		},
		onShow() {
			if(this.$app.globalData.upData.accessoriesGet){
				this.getData(1);
			}
		},
		onReachBottom() {
			if(this.loading){
				this.getData(2)
			}
		},
		onUnload() {
			this.$app.globalData.upData.accessoriesGet = true
		},
		methods:{
			emptyValue(){
				this.title='';
				this.getData(1);
			},
			changeType:function(index){ // 选择类型

				this.type = index;
				this.navId = -1; // 设置导航未选择

				// 判断为配件
				if(this.type ==1){
					this.$api.getAccessoriesType({}).then(res =>{
						this.table = res
					})
				}else{
					this.$api.getAccessoriesType2({}).then(res =>{
						this.table = res
					})
				}
				this.getData(1)
			},	
			nav(index){  // 产品类型切换
				
				if(this.navId == index){
					this.navId = -1;
				}else{
					this.navId = index;
				}				
				this.showData();

			},
			editnum(type,index,itemObj){ // 加减操作
				 // 加
				if(type == 1){

					this.list[index].num++;

				}else{

					if(this.list[index].num-1<=0){
						this.list[index].num = 0;
					}else{
						this.list[index].num--;
					}

				}
				// 合并集合
				this.mergeArray(this.list);
				this.sum();

			},
			mathTotal(index){ // 计算数量

				this.list[index].num = parseInt(this.list[index].num)

				// 判断不为负数
				if(this.list[index].num<0){
					this.list[index].num = 0;
				} 
				// 合并集合
				this.mergeArray(this.list);
				this.sum();
				
			},
			sum(){ // 计算总金额和数量
				this.totalPrice=0;
				this.total =0;
		
				for(let i in this.protList){
					if(this.protList[i].num>0){
						this.total = this.total+this.protList[i].num;
						this.totalPrice = this.totalPrice + parseInt(this.protList[i].num)*parseFloat(this.protList[i].settlement);
					}
				}
				 
				if(this.totalPrice>this.limit){
					this.$api.prompt('您的限额为￥'+this.limit);
					this.isExcess = 1;
				}else{
					this.isExcess = -1;
				}
			},
			getData(type){
				this.$refs.load.initLoading({loadType:type}).then(res =>{
					this.boxHide = false;

					if(type == 1 || type == 2){
						
						this.page = 1;
						this.loading = true;
						this.$app.globalData.upData.accessoriesGet = false; 
					}
					let upJson = {page:this.page,product_type:this.type,title:this.title}

					// 查询类型
					//if(this.navId > -1) upJson.type = this.table[this.navId]
					this.$api.getAccessoriesLibrary(upJson).then(res => {
						this.limit=parseInt(res.limit);

						for(let i in res.data){
							res.data[i].num = 0
							res.data[i].product_type = this.type; // 设置类型
						 }
						// 判断标题不为空
						if(upJson.title){
							this.protList = res.data;
							this.list = res.data;
							this.navId = -1;
						}else{
							this.mergeArray(res.data); // 合并数组
						}
						
						this.$refs.load.getLoadingData({oldData:this.protList,newData:res.data}).then(res => {
							//this.list = res.list;
							this.loading = res.loading;
							this.page ++;
						});
					})
				})
			},
			// 合并数组
			mergeArray(data){
				 
				let that = this;
				// 判断原集合为空
				if(that.protList.length == 0){ 

					that.protList = data;

				}else{
					// 遍历查看是否有相同
					for(let i in data){

						let isExist = false; // 是否存在
 
						for(let j in that.protList){
 
							if(that.protList[j].id == data[i].id){ // 判断存在
								isExist = true;
								if(data[i].num>0){
									that.protList[j] = data[i]; // 更换对象
								}
								break;
							}
						}

						// 不存在
						if(!isExist ){
							that.protList.push(data[i]);
						}
					}
				}

				this.showData();
  
			},
			// 改变显示数据
			showData(){

				this.list = [];//去空
				// 产品类型
				let productType = this.navId==-1?'':this.table[this.navId];
				for(let i in this.protList){

					// 判断基本类型
					if(this.type == this.protList[i].product_type){

						// 产品类型为空
						if(productType == '' || productType.length == 0){

							this.list.push(this.protList[i]);

						// 判断选择产品类型
						}else if(this.protList[i].type == productType){
							this.list.push(this.protList[i]);
						}

					}

				}

			},
			add(){ // 添加方法
				if(this.total == 0){
					uni.showToast({title:"领取数量不能为0",icon:"none"})
					return
				}else if(this.isExcess != -1){
					uni.showToast({title:"已超额，您的限额为￥"+this.limit,icon:"none"})
					return
				}
				let list = []
				for(let i in this.protList){
					if(Number(this.protList[i].num) > 0){
						list.push(this.protList[i])
					}
				} 
				uni.setStorageSync("accessories",list)
				uni.navigateTo({
					url:"/pages/accessories/get/add/add"
				})
			},

		},
		watch:{
			title(val){
				this.showEmptyBtn=val==""?false:true;
			}
		}
	}
</script>

<style>
	.get{padding-bottom: 100upx;}
	.sideBar{width: 178upx;font-size: 28upx;color: #666666;text-align: center;line-height: 86upx;background: #F8F8FA;position: fixed;left: 0;top: 200upx;border-right: 2upx solid #EEEEEE;}
	.sideBar view{padding: 0 10upx;box-sizing: border-box;overflow: hidden;}
	.active{background: rgba(55,141,232,0.1);color: #049BFF;}
	
	.get_list{width:570upx;margin-left: 180upx;margin-top: 200upx;}
	.get_item{width: 100%;padding: 20upx;box-sizing: border-box;border-bottom: 2upx solid #EEEEEE;display: flex;flex-direction: row;align-items: center;background: #FFFFFF;}
	.get_item_img{width:124upx;height: 124upx;background: #EEEEEE;}
	.get_item_content{flex-grow: 1;margin-left: 20upx;font-size: 28upx;color: #333333;}
	.get_item_id{font-size: 24upx;color: #666666;margin-top: 10upx;}
	.get_item_num{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: flex-end;font-size: 24upx;margin-top: 10upx;}
	.get_item_num image{width: 32upx;height: 32upx;}
	.get_item_num input{width: 90upx;height: 32upx;font-size: 24upx;color: #333333;border: 2upx solid #D4D4D4;margin: 0 10upx;border-radius: 16upx;text-align: center;}
	
	.get_bottom{position: fixed;width: 100%;height: 100upx;border-top: 2upx solid #EEEEEE;font-size: 28upx;color: #333333;left: 0;bottom: 0;padding: 0 30upx;box-sizing: border-box;background: #FFFFFF;z-index: 999;}
	.get_bottom_list{width: 100%;display: flex;flex-direction: row;align-items: center;height: 100upx;}
	.get_bottom_list view:nth-child(3){width: 250upx;height: 70upx;background: #049BFF;color: #FFFFFF;text-align: center;line-height: 70upx;border-radius: 8upx;margin-left: auto;}
	.totalPrice {
		margin-left: 30rpx;
	}
</style>
